<template>
	<div class="cousenavList">
		<div class="nav" v-for="(v,i) in this.$store.state.courseNav" :key="i">
			<div class="counavtop">
				<h4>{{v.header}}</h4>
				<p>更多</p>
				<span>&gt;</span>
			</div>
			<ul class="navList">
				<li v-for="(value,i) in v.navList" :key="i">
					<img :src="value.img" />
					<h5>{{value.title}}</h5>
					<p>￥{{value.pirce}}</p>
					<span>{{value.stu}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		mounted() {
			this.$store.dispatch("coursenavaxios")
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.cousenavList{
		padding-bottom: 0.55rem;
		.nav{
			background-color: #FFFFFF;
			margin-top: 0.05rem;
			padding: 0.08rem 0.15rem 0rem;
			width: calc(100% - 0.3rem);
			.counavtop{
				width: 100%;
				height: 0.57rem;
				line-height: 0.57rem;
				h4{
					font-size: 0.18rem;
					float: left;
				}
				p,span{
					font-size: 0.14rem;
					color: #686868;
					float: left;
				}
				p{
					margin-left: 2.3rem;
				}
				span{
					margin-left: 0.05rem;
				}
			}
			.navList{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				li{
					width: 1.68rem;
					height: 2.07rem;
					position: relative;
					h5{
						font-size: 0.15rem;
						line-height: 0.23rem;
						position: absolute;
						left: 0;
						top: 1.05rem;
					}
					p{
						font-size: 0.14rem;
						position: absolute;
						left: 0;
						bottom: 0.33rem;
						color: #e00a09;
					}
					span{
						font-size: 0.14rem;
						position: absolute;
						right: 0;
						bottom: 0.33rem;
						color: #777777;
					}
				}
				li:nth-of-type(even){
					margin-left: 0.08rem;
				}
			}
		}
	}
</style>
